<%inherit file="/base_app.html"/>

<%block name="title_content">
    <a class="btn btn-green btn-min-w f_r mr10"  href="${SITE_URL}release/${app_info.get('code', '--')}/"> ${_(u'发布部署')}</a>
</%block>
<%block name="right_content">
    <link rel="stylesheet" type="text/css" href="${STATIC_URL}css/paas_app.${CSS_SUFFIX}?v=${STATIC_VERSION}">
    <link rel="stylesheet" type="text/css" href="${STATIC_URL}css/paas_app_visiable.${CSS_SUFFIX}?v=${STATIC_VERSION}">
    <link rel="stylesheet" type="text/css" href="${STATIC_URL}assets/components_vue/bk-magic-vue.css?v=${STATIC_VERSION}">
    <style>
    [v-cloak] { display: none }
    .bk-dialog [class*=" icon-"], .bk-dialog [class^=icon-] {
      background-image: none;
      width: auto;
    }
    .bk-infinite-tree .node-radio .node-checkbox.is-checked:after,
    .bk-infinite-list .node-checkbox.is-checked:after {
      left: 5px;
      top: 2px;
    }
    .bk-infinite-tree .arrow-icon {
      margin-right: 3px;
      top: 0;
    }
    .bk-infinite-list .user-content .user-icon {
      top: 0;
      margin-right: 5px;
    }
    .bk-infinite-tree .node-icon {
      top: -1px;
      margin-right: 5px;
      margin-left: 2px;
    }
    .bk-add-member-dialog .add-member-content-wrapper .right .content .user-content .user-icon {
      top: 0;
      margin-right: 5px;
    }
    .bk-add-member-dialog .add-member-content-wrapper .right .content .organization-content .folder-icon {
      top: 0;
      margin-right: 5px;
    }
    </style>

        <hr/>
        % if app_info.get('project_tmp_download_url'):
        <div class="ml50 app-info">
            <div class="t_b mb10"> ${_(u'应用初始框架代码')}
            </div>
            <div class="row">
                <div class="col-sm-12 col-xs-12">
                    <font class="t_grey"> ${_(u'下载链接')}：</font>
                    <a href="${app_info.get('project_tmp_download_url')}">${_(u'点击下载')}</a><font style="color:red">（${_(u'链接12小时内有效，请及时下载')}）</font>
                </div>
            </div>
        </div>
        <hr/>
        % endif
        <div class="ml50 app-info">
            <div class="t_b mb10"> ${_(u'注册信息')}
            </div>
            <div class="row">
                <div class="col-sm-4 col-xs-4">
                    <font class="t_grey"> ${_(u'应用 ID')}：</font>${app_info.get('code', '--')}
                </div>
                <div class="col-sm-8 col-xs-8">
                    <font class="t_grey"> ${_(u'应用 TOKEN')}：</font>${app_info.get('auth_token', '--')}
                </div>
            </div>
        </div>
        <hr/>
        <div class="ml50 app-info">
            <div class="t_b mb10"> ${_(u'应用简介')}
                <div class="f_r mr30">
                    <a href="###" style="margin-left:10px;font-weight: 400;display:none;" class="can_a" id="introduction_cancle"> ${_(u'取消')} </a>
                    <a href="###" style="margin-left:10px;font-weight: 400;" id="intro_operate" data="0" class="operate" edit-class="introduction"> ${_(u'编辑')}</a>
                </div>
                <span id="tip_introduction" style="color: #f00;" class="f_r app-info-tips"></span>
            </div>
            <div class="row">
                <div class="col-sm-10 col-xs-10">
                    <input type="text" class="form-control app-edit app-value" id="introduction" name="introduction"  value="${app_info.get('introduction', '')}" style="display:none;width:908px;">
                    <div id="intro_value" value="${app_info.get('introduction', '')}" class="introduction">${app_info.get('introduction', '--') | h}</div>
                </div>
            </div>
        </div>
        <hr/>
        <div class="ml50 app-info">
            <div class="t_b mb10"> ${_(u'基本信息')}
                <div class="f_r mr30">
                    <a href="###" style="margin-left:10px;font-weight: 400;display:none;" class="can_a" id="base_cancle"> ${_(u'取消')}</a>
                    <a href="###" style="margin-left:10px;font-weight: 400;" id="base_operate" data="0" class="operate" edit-class="base"> ${_(u'编辑')}</a>
                </div>
                <span id="tip_name" style="color: #f00;" class="f_r app-info-tips"></span>
            </div>
            <div class="mb10" ></div>
            <div class="row">
                <div class="col-sm-4 col-xs-4">
                    <input type="hidden" id="app_code_id" value="${app_info.get('code', '--')}"></input>
                    <font class="t_grey"> ${_(u'应用 ID')}：</font>${app_info.get('code', '--')}
                </div>
                <div class="col-sm-4 col-xs-4">
                    <font class="t_grey f_l"> ${_(u'应用名称')}：</font>
                    <input type="text" class="form-control app-edit app-value" id="name" name="name" value="${app_info.get('name', '--')}" operation="modify" style="width:200px;margin-top:-6px;display:none;">
                    <div id="app_name" class="base">${app_info.get('name', '--')}</div>
                </div>


            </div>
            <div class="row mt5 chmt">
                <div class="col-sm-4 col-xs-4">
                    <div class=""><font class="t_grey"> ${_(u'创建者')}：</font>${app_info.get('creater', '--')}</div>
                </div>
                <div class="col-sm-4 col-xs-4">
                    % if app_info.get('language') == 'java':
                        <font class="t_grey"> ${_(u'开发语言')}：</font>Java（Spring-boot）
                    % else:
                        <font class="t_grey"> ${_(u'开发语言')}：</font>Python（Django）
                    % endif
                </div>

            </div>
            <div class="row mt5 chmt">
                <div class="col-sm-4 col-xs-4">
                    <font class="t_grey"> ${_(u'首次提测')}：</font>${app_info.get('first_test_time', '--') or '--'}
                </div>
                <div class="col-sm-4 col-xs-4">
                    <font class="t_grey"> ${_(u'首次上线')}：</font>${app_info.get('first_online_time',  '--') or '--'}
                </div>
            </div>
            <div class="row mt5 chmt">
                <div class="col-sm-10 col-xs-10" style="width:100%">
                    <div class="row" >
                        <div class="col-sm-2 col-xs-2">
                            <div><font class="t_grey"> ${_(u'应用分类')}：</font></div>
                        </div>
                        <div class="col-sm-8 col-xs-8" style="margin-left: -93px;">
                            <div id="app_tags_div" class="app-edit" style="display:none;">
                                <select class="form-control" id="app_tags" style="width: 200px;">
                                    % for tag in tags:
                                        % if tag[0] == app_info.get('tags_code', ''):
                                            <option value="${tag[0]}" selected>${tag[1]}</option>
                                        % else:
                                            <option value="${tag[0]}">${tag[1]}</option>
                                        % endif
                                    % endfor
                                </select>
                            </div>
                            <div id="app_tags_dis" class="base" >${app_info.get('tags', '--') or '--'}</div>
                        </div>
                    </div>
                </div>
            </div>

            % if EDITION == "ee":
            <div class="row mt5 chmt">
                <div class="col-sm-10 col-xs-10" style="width:100%">
                    <div class="row" >
                        <div class="col-sm-2 col-xs-2">
                            <div><font class="t_grey"> ${_(u'可见范围')}：</font></div>
                        </div>
                        <div class="col-sm-8 col-xs-8" style="margin-left: -94px;">
                          <div id="app">
                                <div class="selected-text" ref="selectedText" style="font-size: 14px; margin-bottom: 10px;">--</div>
                                <div class="item">
                                <bk-button type="default" @click="handleChoose" size="small">${_(u'选择组织/人员')}</bk-button>
                                </div>

                                <bk-user-selector
                                    :show="isShow"
                                    :users="users"
                                    :departments="departments"
                                    api-host="${app_info.get('paas_host')}"
                                    @submit="handleSubmit"
                                    @cancel="handleCancel">
                                </bk-user-selector>
                                <div id="#error_tip"></div>
                          </div>
                        </div>
                        <div class="col-sm-2 col-xs-2">
                            <div id="tip_developer" style="color: #f00;" class="app-info-tips"></div>
                        </div>
                    </div>
                </div>
            </div>
            % endif

        </div>

        % if EDITION == "ee":
        <hr/>
        <div class="ml50 app-info">
            <div class="t_b mb10"> ${_(u'桌面信息')}
                <div class="f_r mr30">
                    <a href="###" style="margin-left:10px;font-weight: 400;display:none;" class="can_a" id="desktop_cancle"> ${_(u'取消')}</a>
                    <a href="###" style="margin-left:10px;font-weight: 400;" id="desktop_operate" data="0" class="operate" edit-class="desktop"> ${_(u'编辑')}</a>
                </div>
                <span id="tip_desktop" style="color: #f00;" class="f_r app-info-tips"></span>
            </div>
            <div class="row mt5 chmt">
                <div class="col-sm-4 col-xs-4">
                    <font class="t_grey f_l"> ${_(u'窗口宽度')}：</font>
                    <input type="number" class="form-control app-edit app-value" id="width" name="width" value="${app_info.get('width')}" min="1" operation="modify" style="width: 90px; margin-top: -1px; display: none;">
                    <div id="width_value" class="desktop f_l">${app_info.get('width')}</div><span class="desktop_wh_px">px</span>
                </div>
                <div class="col-sm-4 col-xs-4">
                    <font class="t_grey f_l"> ${_(u'窗口高度')}：</font>
                    <input type="number" class="form-control app-edit app-value" id="height" name="height"  value="${app_info.get('height')}" min="1" operation="modify" style="width: 90px; margin-top: -1px; display: none;">
                    <div id="height_value" class="desktop f_l">${app_info.get('height')}</div><span class="desktop_wh_px">px</span>
                </div>
            </div>
            <div class="row mt5 chmt">
                <div class="col-sm-10 col-xs-10" style="width:100%">
                    <div class="row" >
                        <div class="col-sm-2 col-xs-2">
                            <div><font class="t_grey"> ${_(u'打开方式')}：</font></div>
                        </div>
                        <div class="col-sm-8 col-xs-8" style="margin-left: -92px;">
                            <div id="open_mode_div" class="app-edit" style="display:none;">
                                <select class="form-control" id="open_mode_choices" style="width: 200px;">
                                    % for mode in open_mode_choices:
                                        % if mode[0] == app_info.get('open_mode'):
                                            <option value="${mode[0]}" selected>${mode[1]}</option>
                                        % else:
                                            <option value="${mode[0]}">${mode[1]}</option>
                                        % endif
                                    % endfor
                                </select>
                            </div>
                            <div id="open_mode_dis" class="desktop" >${app_info.get('open_mode_name', '--') or '--'}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        % endif


        <hr/>
        <div class="ml50 app-info">
            <div class="t_b mb10"> ${_(u'访问地址')}
            </div>
            <div class="row">
                <div class="col-sm-10 col-xs-10">
                    <font class="t_grey"> ${_(u'测试地址')}：</font> <span id="test_access_span"></span>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10 col-xs-10">
                    <font class="t_grey"> ${_(u'正式地址')}：</font> <span id="prod_access_span"></span>
                </div>
            </div>
        </div>
        <hr/>
        <div class="mb10 ml50 app-info">
          <div class="t_b mb10"> ${_(u'源代码管理信息')}
                 <div class="f_r mr30">
                    <a href="###" style="margin-left:10px;font-weight: 400;display:none;" class="can_a" id="vcs_cancle"> ${_(u'取消')}</a>
                    <a href="###" style="margin-left:10px;font-weight: 400;" id="intro_operate" data="0" class="operate" edit-class="vcs"> ${_(u'编辑')}</a>
                </div>
                <span id="tip_vcs" style="color: #f00;" class="f_r"></span>
          </div>
          <div class="row">
              <div class="col-sm-4 col-xs-4">
                  <input type="hidden" id='vcs_type_id' value="${app_info.get('vcs_type', '')}"> </input>
                  <font class="t_grey"> ${_(u'仓库类型')}：</font>${app_info.get('vcs_type_name', '--') or '--'}
              </div>
          </div>
          <div class="row">
            <div class="col-sm-12 col-xs-12">
              <font class="t_grey"> ${_(u'仓库地址')}：</font>
              <input type="text" class="form-control app-edit app-value" id="vcs_url" name="vcs_url" value="${app_info.get('vcs_url', '')}" style="display:none;width:278px;margin-bottom: 5px; margin-left: -2px;">
              <span id="vcs_url_value" value="${app_info.get('vcs_url', '')}" class="vcs" style="margin-left: -2px;">${app_info.get('vcs_url', '--') or '--'}</span>
              <span id="tip_vcs_url" class="app-info-tips mt10 mb5 ml150 error"></span>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-4 col-xs-4">
              <font class="t_grey">${app_info.get('vcs_type_name', '') or ''}&nbsp;&nbsp;${_(u'帐号')}：</font>
              <input type="text" class="form-control app-edit app-value" id="vcs_username" name="vcs_username" value="${app_info.get('vcs_username', '--')}" style="display:none;width:200px;margin-bottom: 5px;">
              <span id="vcs_username_value" value="${app_info.get('vcs_username', '')}" class="vcs" >${app_info.get('vcs_username', '--') or '--'}</span>
              <br><span id="tip_vcs_username" class="app-info-tips mt10 mb5 ml150 error"></span>
            </div>
            <div class="col-sm-8 col-xs-8">
              <font class="t_grey"> ${_(u'密码')}：</font>
              <!-- 防止Firefox下密码自动填充 -->
              <input type="text" style="display:none">
              <input type="password" style="display:none">
              <input type="text" onfocus="this.type='password'" class="form-control app-edit app-value" id="vcs_password" name="vcs_password" value="" style="display:none;width:278px;margin-bottom: 5px;">
              <span id="vcs_password_value" class="vcs" style="vertical-align:sub;">******</span>
              <!-- <a href="###" title="显示密码" class="ml5 password_show" data="0"><i class="bk-icon icon-eye t_b t_s12" style="transform: scale(0.8,0.8);"></i></a> -->
             <span id="tip_vcs_password" class="app-info-tips mt10 mb5 ml150 error"></span>
            </div>
          </div>
        </div>

        <hr/>
        <div class="ml50">
            <div class="t_b mb10"> ${_(u'删除应用')}</div>
            <div class="row">
                <div class="col-sm-10 col-xs-10">
                    % if app_info.get('state', '') == 1:
                        <div class="mb5"> ${_(u'应用的开发者能删除该应用，请在删除前与其他同事提前沟通，确定')}<a href="###" onclick="REL_MANAGER.app_del(this, '${app_info.get('code', '')}');" app_code="${app_info.get('code', '')}" class="hit app_del"><strong> ${_(u'删除')}</strong></a>!</div>
                    % else:
                        <div class="mb5"> ${_(u'只有开发中的应用才能删除，提测和上线过的应用不能删除！')}</div>
                    % endif
                </div>
            </div>
        </div><hr/>
</%block>

<script src="${STATIC_URL}js/paas_release.${JS_SUFFIX}?v=${STATIC_VERSION}"></script>
<script src="${STATIC_URL}js/paas_app.${JS_SUFFIX}?v=${STATIC_VERSION}"></script>
<script src="${STATIC_URL}js/paas_app_visiable.${JS_SUFFIX}?v=${STATIC_VERSION}"></script>
<script src="${STATIC_URL}assets/vue/vue-2.5.22.${JS_SUFFIX}?v=${STATIC_VERSION}"></script>
<script src="${STATIC_URL}assets/components_vue/bk-magic-vue.min.js?v=${STATIC_VERSION}"></script>
<script src="${STATIC_URL}assets/components_vue/bk-user-selector.umd.js?v=${STATIC_VERSION}"></script>
<script type="text/javascript">
    $(function(){
        APP_INFO.get_access_info('${app_code}');
        var data = JSON.parse('${app_info.get("visiable_labels", "[]")}');
        APP_VISIABLE.init('${app_code}', data);
    })
</script>
